import React, { Component } from 'react'
import { NavBar, Icon } from "antd-mobile";
import "./Register.css";
import axios from "axios";
export default class Register extends Component {
    state = {
        username: "",
        password: "",
        code: "",
        text: "发送验证码",
        num: 10
    }
    handleRegClick = (params) => {
        console.log();
        if(this.state.username !== "" && this.state.password !== "" && this.state.code !== ""){
            axios.post("http://s.linweiqin.com/api/s/createUser",{
                mobile:this.state.username,
                username:this.state.username,
                password:this.state.password,
                code:this.state.code
            }).then((res) => {
                console.log(res)
            }
            )
        }
        
    }
    handleLoginClick = (params) => {
        this.props.history.push("/login")
    }
    
    handleUsername = (e) => {
        let username = e.target.value;
        this.setState({
            username
        })
    }
    handleCode = (e) => {
        let code = e.target.value;
        this.setState({
            code
        })
    }
    handlePassword = (e) => {
        let password = e.target.value;
        this.setState({
            password
        })
    }
    sendCode = (params) => {
        let num = 10;
        this.setState({
            text: "10 秒"
        })
        let dsq = setInterval(()=>{
            num--
            if (num >= 1) {
                this.setState({
                    num
                })
            }else{
                clearInterval(dsq)
                this.setState({
                    text:"发送验证码",
                    num:10
                })
            }
        }, 1000)
        console.log(this.state.username);
        axios.get("http://s.linweiqin.com/api/s/getMobileCode",{
            params:{mobile:this.state.username}
        }).then((res) => {
            console.log(res)
        })

    }

    render() {
        return (
            <div className="yg-register">
                <div className="yg-register-nav">
                    <NavBar
                        icon={<Icon type="left" />}
                        onLeftClick={() => window.history.go(-1)}
                    >注册</NavBar>
                </div>
                {/* 注册内容的开始 */}
                <div className="register-content">
                    <label htmlFor="username">
                        <input type="text" id="username" value={this.state.username} placeholder="账号" onChange={this.handleUsername} />
                    </label>
                    <br />
                    <label htmlFor="code">
                        <input type="text" id="code" value={this.state.code} placeholder="验证码" onChange={this.handleCode} /> {this.state.text === "发送验证码" ? <button className="codeBtn" onClick={this.sendCode}>{this.state.text}</button> : <button className="codeBtn">{this.state.num} 秒</button>}
                    </label>
                    <br />
                    <label htmlFor="password">
                        <input type="text" id="password" value={this.state.password} placeholder="密码" onChange={this.handlePassword} />
                    </label>
                    <div className="register-btn" onClick={this.handleRegClick}>注册</div>
                    <span className="login-btn" onClick={this.handleLoginClick}>登录</span>
                </div>
                {/* 注册内容的结束 */}
            </div>
        )
    }
}
